<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .article{
            width: 300px;
            font-size: 13px;
        }
        .compA,.compB,.compC{
            padding: 5px;
            border: 1px dashed #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count++</button></p>

        <comp-a :count.sync="count"></comp-a>
    </div>
    
</body>
<template id="compA">
    <div class="compA">
        这是组件A: {{count}}
        <button @click="$emit('update:count',count + 1)">子组件修改父组件count</button>
    </div>
</template>
<!-- <template id="compB">
    <div class="compB">
        这是组件B
        <comp-c :count="count"></comp-c>
    </div>
</template>
<template id="compC">
    <div class="compC">
        这是组件C {{count}}
    </div>
</template> -->
<script>
    

    // 子组件进入更新阶段
    // (1) 子组件自身的数据发生改变  => 进入更新阶段(只会触发组件自身的更新阶段)
    // (2) 子组件接收了父组件动态传递的数据  =>  父组件传入的数据,就是子组件接收的数据, 
    //     父组件数据发生改变 => 触发父组件的更新阶段 => 父组件解析template为虚拟DOM => 触发子组件的更新阶段 => 子组件也会解析template(子组件的)为虚拟DOM  =>  通过diff算法转化为真实DOM结构 =>  传递父组件(作为父组件的虚拟dom) => 父组件继续向后解析 => 知道将所有的组件解析完毕 -> 通过diff算法 => 更新真实DOM  



   
    // Vue.component("compC",{
    //     props:["count"],
    //     data(){
    //         return {
    //         }
    //     },
    //     template:"#compC",
    //     methods:{
    //     }
    // })


    // Vue.component("compB",{
    //     props:["count"],
    //     data(){
    //         return {
    //         }
    //     },
    //     template:"#compB",
    //     methods:{
    //     }
    // })

    Vue.component("compA",{
        props:["count"],
        data(){
            return {
            }
        },
        template:"#compA",
        beforeUpdate() {
            console.log("5 beforeUpdate:子组件",this.count);
        },
        updated() {
            console.log("6 updated:子组件",this.count);
        },
    })


    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        },
        beforeUpdate() {
            console.log("5 beforeUpdate:父组件",this.count);
        },
        updated() {
            console.log("6 updated:父组件",this.count);
        },
    })




</script>
</html>